<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <style>
        html,body{
            margin: 0px;
            background-color: black;
        }
        main{
            width: 320px;
            height: 480px;
            background-color: #fff;
            margin: 60px auto;
        }
        #bord{
            border-radius: 0px;
        }
        form{
            width: 320px;
        }
        form div{
            width: 90%;
        }
    </style>
</head>
<body>
    <main>
               <nav class="navbar navbar-inverse" id="bord">
                    <span class="navbar-brand pull-left" onclick="history.back();">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                    </span>
                    <span class="navbar-brand text-center">注册</span>
                </nav>
                <div class="container">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" required pattern="[\u4e00-\u9fa5]{1,10}" name="petname" placeholder="请输入昵称">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" required pattern="[0-9a-zA-Z]{6,12}" name="password" placeholder="请输入密码">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" required pattern="[0-9a-zA-Z]{6,12}" id="confirm" placeholder="请再次输入密码">
                        </div>
                        <div class="form-group">
                            <input type="radio" checked  name="isMale" value="male"> 男 <br>
                            <input type="radio"  name="isMale" value="female"> 女
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control"  name="email" placeholder="请输入邮箱">
                        </div>
                        <div class="form-group">
                            <select name="course" class="form-control" >
                                <option value="HTML5">运动</option>
                                <option value="JavaScript">旅游</option>
                                <option value="CSS">阅读</option>
                                <option value="UI">看视频</option>
                            </select>
                        </div>
                        <div>
                           <button type="submit" class="btn btn-success form-control">注册</button>
                        </div>
                    </form>
                </div>

                <!--模态框-->
                <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">校园二手交易平台</h4>
                            </div>
                            <div class="modal-body">
                                <p></p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
    
    </main>
    
     <script src="lib/bootstrap/js/jquery.min.js"></script>
     <script src="lib/bootstrap/js/bootstrap.min.js"></script>
     <script src="js/register.js"></script>
</body>
</html>